<template>
	<view class="drugstore-item-wrap" @click="gotoTerminal()">
		<view class="drugstore-box-logo"><image class="skeleton-rect-radius" :src="moduleData.picture" mode="aspectFit"></image></view>
		<view class="drugstore-box-info">
			<view class="skeleton-rect-radius drugstore-info-name">{{ moduleData.terminalName }}</view>
			<view class="drugstore-info-market">
				<!-- <view class="skeleton-rect-radius drugstore-market-number">月售：{{ moduleData.saleNum }}</view> -->
				<u-distance class="skeleton-rect-radius" :distance="moduleData.distance" ></u-distance>
			</view>
			<view class="drugstore-goods-list">
				<view class="drugstore-goods-item" v-for="(item, index) in terminalGoods" :key="index">
					<view class="drugstore-goods-pic">
						<image class="skeleton-rect-radius" :src="item.thumbUrl" mode="aspectFit"></image>
						<!-- <view>
							<image src="../../static/images/icon_play_video@2x.png"></image>
							<view>用药指导</view>
						</view> -->
					</view>
					
					<view class="skeleton-rect-radius drugstore-goods-name nowrap">{{ item.name }}</view>
					<view class=" drugstore-goods-price">￥{{ item.salePrice }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uDistance from '@/components/u-distance/u-distance.vue';
export default {
	components: {
		uDistance
	},
	props: {
		pageLoading: {
			type: Boolean,
			default: true
		},
		moduleData: {
			type: Object,
			default: ()=>({})
		}
	},
	watch:{
		moduleData(value){
			this.findByHomeTerminalGoods();
		}
	},

	data() {
		return {
			terminalGoods: [1, 2, 3] //终端商品
		};
	},
	created() {
		uni.createSelectorQuery()
			.in(this)
			.selectAll('.skeleton-rect-radius')
			.boundingClientRect()
			.exec(rects => {
				uni.$emit('skeletonComponents', rects[0]);
			});
		this.findByHomeTerminalGoods();
		// this.loading = this.pageLoading;
	},

	methods: {
		gotoTerminal() {
			uni.navigateTo({
				url: '/pages-terminal/terminal/terminal?terminalNo=' + this.moduleData.terminalNo
			});
		},
		//查询终端内在售商品，嵌在首页终端下面
		findByHomeTerminalGoods() {
			this.$api
				.findByHomeTerminalGoods({
					url: {
						terminalNo: this.moduleData.terminalNo ? this.moduleData.terminalNo : '1'
					},
					params: {
						size: '3'
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.terminalGoods = res.data.records;
					}
				});
		}
	}
};
</script>

<style lang="less">
.drugstore-item-wrap {
	display: flex;
	padding: 16rpx 24rpx;
	box-sizing: border-box;
	background: #ffffff;
	width: 750rpx;
	// height: 410rpx;
	padding-bottom: 24rpx;
	border-bottom: 1rpx solid #F8F8F8;

	.drugstore-box-logo {
		> image {
			width: 162rpx;
			height: 124rpx;
		}
		margin-right: 20rpx;
		margin-left: 6rpx;
	}
	.drugstore-box-info {
		width: 514rpx;
		.drugstore-info-name {
			// width: 460rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #0d0d0d;
			margin-bottom: 6rpx;
		}
		.drugstore-info-market {
			display: flex;
			margin-bottom: 29rpx;
			.drugstore-market-number {
				// width: 500rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #666666;
				margin-right: auto;
			}
			.drugstore-market-distance {
				width: 163rpx;
				height: 38rpx;
				background: #61c26010;
				border-radius: 2rpx;
				display: flex;
				align-items: center;
				margin-left: auto;
				// border: 1rpx solid #61c26010;
				> image {
					width: 12rpx;
					height: 22rpx;
					margin-right: 8rpx;
				}
				> text {
					font-size: 20rpx;
					font-weight: 500;
					color: #61c260;
				}
			}
		}
		.drugstore-goods-list {
			display: flex;
			justify-content: space-between;
			.drugstore-goods-item {
				width: 162rpx;
				// height: 178rpx;
				background: #ffffff;
				border-radius: 4rpx;

				.drugstore-goods-pic {
					width: 162rpx;
					height: 178rpx;
					margin-bottom: 10rpx;
					position: relative;
					border: 1rpx solid #f2f2f2;
					> image {
						width: 162rpx;
						height: 178rpx;
					}
					> view {
						display: flex;
						align-items: center;
						position: absolute;
						width: 170rpx;
						height: 42rpx;
						background: #576b95;
						border-radius: 4rpx;
						padding-left: 20rpx;
						box-sizing: border-box;
						bottom: 0rpx;
						left: -4rpx;
						> image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}
						> view {
							font-size: 22rpx;
							font-weight: 500;
							color: #ffffff;
						}
					}
				}

				.drugstore-goods-name {
					font-size: 22rpx;
					font-weight: 500;
					color: #0d0d0d;
					margin-bottom: 16rpx;
				}
				.drugstore-goods-price {
					font-size: 20rpx;
					font-weight: bold;
					color: #dc564a;
				}
			}
		}
	}
}
</style>
